<!DOCTYPE html>
<html>
<!-- <%=point('hat','comment'); %> -->
<head>
    <title>test case for scrollIntoView function</title>
    <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="../scrollIntoView.js"></script>
<style type="text/css">
    div a {display:inline-block;}
</style>
</head>
<body>
<script>
    var testArray=['a10','a20','a30','b10','b20','b30'],
        idArray=['c10','c20','c30'];
</script>

<h3 id="buttons">test pannel to check a scroll ability</h3>
<div >
    <script type="text/javascript">
        for(var i =0 ;i<testArray.length;i++){
            document.write('<button onclick="_scrollIntoView(\'a[name='+testArray[i]+']\')">Click to view "'+testArray[i]+'" </button>');
        }
        for(var i =0 ;i<idArray.length;i++){
            document.write('<button onclick="_scrollIntoView(\'#'+idArray[i]+'\')">Click to view "#'+idArray[i]+'" </button>');
        }
        for(var i =0 ;i<testArray.length;i++){
            document.write('<a href="#'+testArray[i]+'"> anchor "#'+testArray[i]+'" </a>&nbsp;');
        }
    </script>
</div>
<h3>Div with max height:100px</h3>
<div style="max-height:1000px;overflow:auto">
    <span>The</span> <span style="font-size:30px;">quick</span> <span>brown</span> <span>fox</span> <span>jumps</span> <span>over</span> <span>the</span> <span>lazy</span> <span>dog</span>

<h3>Editor into the table</h3>
    <table id='table'>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td><a name="anc1">1</a></td><td>1</td><td>1</td><td>1</td><td>1</td><td style="font-size:20px;">1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td style="font-size:30px;">1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </table>

<h3>Editor into the very hight table + Excel-like keyboard moving</h3>
    <button onclick="_scrollIntoView('#buttons')">Up to top </button>
<div   style="height:200px;overflow:auto">
    <table>
        <script type="text/javascript">
            for(var i=0;i<31;i++) {
                document.write('<tr>');
                document.write('<td><a name="a'+i+'">&nbsp;</a></td>');
                for(var j=0;j<5;j++) {

                    document.write('<td>'+i+'-'+j+'</td>');
                }
                document.write('</tr>')
            }
        </script>
    </table>
</div>
    <h3>hight div </h3><button onclick="_scrollIntoView('#buttons')">Up to top </button>
    <div  style="height:200px;overflow:auto"><br>
            <script type="text/javascript">
                for(var i=0;i<31;i++) {
                    document.write('<a name="b'+i+'">b'+i+'</a> jshebxweirfhew rierufh eriugfher iurwtg<br>');
                }
            </script>
    </div>
    <h3>hight div 4 </h3><button onclick="_scrollIntoView('#buttons')">Up to top </button>
    <div   style="height:200px;overflow:auto"><br>
            <script type="text/javascript">
                for(var i=0;i<31;i++) {
                    document.write('<div id="c'+i+'">с'+i+'</div> ');
                }
            </script>
    </div>
</body>
</html>